Estoy usando Vue 3 y en un bucle v-for, estoy creando múltiples elementos de botón. Los botones se están haciendo en otro componente llamado wb-button . Así que llamo wb-button en cada bucle v-for.
Agrego el detector de eventos wb-button que llama a un método dentro del componente actual, simple:
<div v-for="(item,key) in items" :key="key"> <span>{{item.name}}</span> <wb-button @click="deleteItem(item)"> Delete item! </wb-button> </div> Esto funciona como quiero, el problema comienza cuando quiero pasar el wb-button como una referencia al método deleteItem . El propósito es hacer cambios a otra referencia dentro del wb-button . Entonces, lo que básicamente quiero hacer es esto:
export default{ name: 'listComponent', methods:{ async deleteItem(item,wbButtonRef){ // The next line is what I want to do wbButtonRef.$refs.btnElement.putInLoadingStatus() // do the delete item action } } } Sé que puedo crear una referencia en cada wb-button y pasar una identificación o algo al método, pero no creo que sea la forma más limpia de hacerlo.
Si hubiera algo para simplemente pasar el elemento wb-button como parámetro del método, sería genial. Algo como esto:
<!-- I want to know if there is something I can put in the second argument of the 'wb-button' @click event --> <wb-button @click="deleteItem(item, /* what to put here?*/)"> <!-- "this","$this","$event.target" etc ... --> Probé $event.target pero devuelve el elemento raíz de wb-button , lo que necesito es el wb-button en sí mismo como $ref.
En pocas palabras, no puedes. Y dado que esta lógica es relevante solo para el componente de botón en sí, es mejor mantener esta lógica dentro de él. Agregar un accesorio y renderizar algo basado en eso, como usted mismo sugirió en los comentarios, es una buena manera de hacerlo.
Considerando otras opciones
Aunque utilicé la respuesta de @paddotk, 'la forma de accesorios' para resolver mi problema, solo estoy agregando esta respuesta para que cualquiera que lea esta pregunta después tenga una respuesta completa.
Por lo que he descubierto, hay dos formas más de hacer esto:
1- Como @MrFabio_25 mencionó en los comentarios, puedo crear un evento personalizado en el componente secundario y $emitir con 'esto' como parámetro, para poder manejar eso en el componente principal:
// wbButton.vue file <inside-wb-component ref="btnElement" @click="handleClick"> <button> <slot></slot> </button> </inside-wb-component> //and in the script tag //... methods:{ handleClick(){ this.$emit('buttonClick',this) } } //...Y simplemente en el componente padre:
<wb-button @buttonClick="handleButtonClick"> A text here </wb-button> // in the script tag methods:{ handleButtonClick(elem){ elem.$refs.btnElement.putInLoadingStatus() } }2- La segunda forma de hacerlo, sin que el componente secundario esté involucrado, es usar una matriz de referencias, como se explica aquí: Documentación de Vue 3 - refs dentro de v-for
<div v-for="(item,key) in items" :key="key"> <wb-button ref="wbButtonRefs" @click="handleButtonClick(item,key)"> A text here </wb-button> </div> // and in scripts tag //... methods:{ handleButtonClick(item,index){ const buttonRef=this.$refs.wbButtonRefs[index] // Now do whatever with buttonRef buttonRef.$refs.btnElement.putInLoadingStatus() } } //...